<template>
  <div class="mt-p-address-citys">
    <group>
      <cell
      v-for="(city, index) in citys" 
      :key="index" 
      :title="city.name"
      @click.native="handleCityClick(city)"
      is-link></cell>
    </group>
  </div>
</template>

<script>
import { Group, Cell } from "vux"

export default {
  data() {
    return {
      citys: []
    }
  },
  mounted() {
    this.getCitys(this.provinceId)
  },
  methods: {
    async getCitys(pid) {
      this.citys = await this.$store.dispatch("getCity", pid)
      return
    },
    handleCityClick(city) {
      this.$store.commit('setDemandCity', city)
      this.$router.push("/trade/demands/post/address/areas")
    }
  },
  computed: {
    provinceId() {
      return this.$store.state.posts.demand.province.id
    },
  },
  watch: {
    provinceId(pid) {
      this.getCitys(pid)
    }
  },
  components: { Group, Cell }
}
</script>

<style lang="scss">
@import "../../../../../styles/index.scss";
</style>
